import React,{Component} from 'react';
import {View,Text,Image,TouchableOpacity} from 'react-native';
import requset from '../../../utils/request'
import {BASE_URI,FRIENDS_PERSONALINFO} from '../../../utils/pathMap'
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
import {Carousel} from 'teaset'
import IconFonts from '../../../components/IconFonts'
import { pxToDp } from '../../../utils/stylesKits';
import LinearGradient from 'react-native-linear-gradient'

  class Index extends Component{
    state={
      userDetail:{}
    }
    params={
      page:1,
      pagesize:5
    }
    componentDidMount(){
      this.getDetail()
    }
    getDetail = async() =>{
      const params = this.props.route.params
      const url = FRIENDS_PERSONALINFO.replace(':id',params.id)
      const res = await requset.privateGet(url,this.params);
      this.setState({ userDetail: res.data });
      console.log(res.data.silder)
    }
    render(){
      const {userDetail} = this.state
      if(!userDetail.silder) return (<Text>123</Text>)
      return(
          <HeaderImageScrollView
            maxHeight={pxToDp(220)}
            minHeight={pxToDp(40)}
            renderForeground={() => (
              <Carousel style={{height: pxToDp(220)}}>
                {userDetail.silder.map((v,i)=><Image 
                key={i}
                style={{width:"100%",height:pxToDp(220)}} source={{uri:BASE_URI+v.thum_img_path}} />)}
              </Carousel>
            )}
          >
            <View style={{backgroundColor:"#fff"}}>
              {/* 用户个人信息 */}
              <View style={{flexDirection:"row",paddingTop:pxToDp(5),borderRadius:pxToDp(5),borderBottomWidth:pxToDp(1),borderColor:"#ccc"}}>
                        <View style={{flex:4,justifyContent:"space-around"}}>
                            <View style={{flexDirection:'row',alignItems:"center"}}>
                                <Text style={{color:"#555"}}>{userDetail.nick_name}</Text>
                                <IconFonts style={{fontSize:pxToDp(18),color:userDetail.gender === "女"?"#b564bf":"red",marginLeft:pxToDp(5),marginRight:pxToDp(5)}}
                                name={userDetail.gender === "女"? "icontanhuanv":"icontanhuanan"} />
                                <Text style={{color:"#555"}}>{userDetail.age}岁</Text>
                            </View>
                            <View style={{flexDirection:'row'}}>
                                <Text style={{color:"#555",marginRight:pxToDp(5)}}>{userDetail.marry}</Text>
                                <Text style={{color:"#555",marginRight:pxToDp(5)}}>|</Text>
                                <Text style={{color:"#555",marginRight:pxToDp(5)}}>{userDetail.xueli}</Text>
                                <Text style={{color:"#555",marginRight:pxToDp(5)}}>|</Text>
                                <Text style={{color:"#555",marginRight:pxToDp(5)}}>{userDetail.agediff<10? '年龄相仿':'有点代沟'}</Text>
                            </View>
                        </View>
                        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                            <View style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
                                <IconFonts name="iconxihuan" style={{fontSize:pxToDp(50),color:"red"}} />
                                <Text style={{position:"absolute",color:"#fff",fontSize:pxToDp(13),fontWeight:"bold"}}>{userDetail.fateValue}</Text>
                            </View>
                            <Text style={{color:"red",fontSize:pxToDp(13)}}>缘分值</Text>
                        </View>
                    </View>
                    {/* 动态 */}
                    <View style={{paddingTop:pxToDp(10),paddingBottom:pxToDp(10),flexDirection:"row",justifyContent:"space-between",borderBottomWidth:pxToDp(1),borderColor:"#ccc"}}>
                      <View style={{flexDirection:"row",alignItems:"center"}}>
                        <Text style={{color:"#666"}}>动态</Text>
                        <View style={{backgroundColor:"red",width:pxToDp(16),height:pxToDp(16),borderRadius:pxToDp(8),alignItems:"center",justifyContent:"center"}}>
                          <Text style={{color:"#fff",marginLeft:pxToDp(5)}}>3</Text>
                        </View>
                      </View>
                      {/* 右侧结构 */}
                      <View style={{flexDirection:"row"}}>
                        <TouchableOpacity
                          style={{marginRight:pxToDp(8)}}
                        >
                          <LinearGradient 
                          start={{x:0,y:0}} end={{x:1,y:0}} colors={['#f2ab5a', '#ec7c50']} 
                          style={{width:pxToDp(100),height:pxToDp(30),borderRadius:pxToDp(15),flexDirection:"row",alignItems:"center",justifyContent:"space-evenly"}}>
                            <IconFonts name="iconliaotian" style={{color:"#fff"}}></IconFonts>
                            <Text style={{color:"#fff"}}>聊一下</Text>
                          </LinearGradient>
                        </TouchableOpacity>
                        <TouchableOpacity>
                          <LinearGradient 
                          start={{x:0,y:0}} end={{x:1,y:0}} colors={['#6d47f8', '#e56b7f']} 
                          style={{width:pxToDp(100),height:pxToDp(30),borderRadius:pxToDp(15),flexDirection:"row",alignItems:"center",justifyContent:"space-evenly"}}>
                            <IconFonts name="iconxihuan-o" style={{color:"#fff"}}></IconFonts>
                            <Text style={{color:"#fff"}}>喜欢</Text>
                          </LinearGradient>
                        </TouchableOpacity>
                      </View>
                    </View>
            </View>
          </HeaderImageScrollView>
      );
    }
  }
export default Index;